<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>进阶：21、单文件组件</title>
	<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
	<h1>革命尚未成功，同志仍需努力！</h1>
	<script type="text/javascript">
		// 如果你看到这里了，恭喜你！你已成为一名具有基本素养的vue.js开发者
		// 利用我们前面学到的东西，多加练习，你可以用vue初步开发一些简单的单页应用了O(∩_∩)O~
		// 
		// 从本页介绍的内容开始都是属于高级Javascript应用领域的内容了！
		// 在介绍之前，先把本页的主题单文件组件的讲解说完。
		// 
		// 我们前面介绍的vue的特性，集中在组件的构建和实例化使用，以及各种选项的意义和应用场景
		// 在很多Vue项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。
		// 这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：
		// （1）全局定义(Global definitions) 强制要求每个 component 中的命名不得重复
		// （2）字符串模板(String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
		// （3）不支持CSS(No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
		// （4）没有构建步骤(No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
		// 
		// 文件扩展名为 .vue 的 single-file components(单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 Webpack 或 Browserify 等构建工具。
		// 所谓单文件组件，就是一个组件的定义放在一个vue文件中，而不是使用Vue.component进行全局注册
		// 这样做的好处，可以避免组件全局注册命名冲突，也加强了组件的复用、维护、低耦合度
		// 
		// 这是一个文件名为 Hello.vue 的简单实例：
		// <template>
		// 	  <p>{{ greeting }} World!</p>
		// </template>
		// <script>
		// 	  module.exports = {
		// 	  	data: function(){
		// 	  		return {
		// 	  			greeting: 'Hello'
		// 	  		}
		// 	  	}
		// 	  } 
		// </script>
		// <style scoped>
		// p {
		//    font-size: 2em;
		//    text-align: center;
		// }
		// </style>
		// 
		// 解析:
		// (1) template：声明了组件模板，相当于Vue.component的template选项 
		// (2) module.exports导出一个组件对象，其中的选项同Vue.extend{}
		//     				 这里不需要给组件命名，在使用本组件的页面中
		//     				 导入本组件再给组件命名即可
		// (3) style: 样式代码，加了一个scoped属性表示其仅作用域本文件的模板
		// 
		// 将组件分离成一个个vue文件，每个文件就是一个模块，在使用上需要模块化
		// 管理和打包工具配合。比较流行的有 Webpack 或 Browserify 等构建工具。
		// 经过 Webpack 或 Browserify 的预编译后才能转换成浏览器可以识别的代码，
		// 打包的结果是单个js文件。
		// webpack官方文档：
		// 		http://webpack.github.io/
		// webpack中文指南：
		// 		http://webpackdoc.com/
		// 
		// 
		// 这里还需要了解npm，全称为Node Package Manager，npm是一个nodeJs包的
		// 分发和管理工具，以前我们引入插件或工具库时，需要用一个个script标签
		// 引入，这很不方便，npm正是用来解决这种问题，引入你所需要的各种库和模块。
		// npm官方文档：
		// 		https://docs.npmjs.com/getting-started/what-is-npm
		// npm中文文档：
		// 		http://www.kancloud.cn/shellway/npm-doc/199983
		// 		
		// 
		// 学有余力的话，最好了解一下es2015，大家习惯叫它es6，这是javascript的最新
		// 标准，增加了很多新特性，对于模块化组件化开发很有帮助
		// es6官方文档：
		// 		https://babeljs.io/learn-es2015/
		// es6推荐阅读（学习核心内容）：
		// 		http://www.jianshu.com/p/ebfeb687eb70
	</script>
</body>
</html>